@import './common';
@import './head';
@import './foot';

body {
    background-image: url('../images/body_bg.jpg');
    background-attachment: fixed;
}

.banner-box {
    width: 100%;
    position: relative;
    overflow: hidden;

    .earth {
        position: absolute;
        left: 270px;
        top: 410px;
        width: 100%;
        z-index: 99;
        animation: earthMove linear 50s infinite;
    }

    @keyframes earthMove {
        form {
            transform: rotate(0deg)
        }

        to {
            transform: rotate(360deg)
        }
    }
}

.title-box {
    padding: 50px 0;
    text-align: center;
    font-size: 40px;
    background: #fff;

    span {
        font-weight: bold;

        &:first-child {
            color: #384B59;
        }
    }
}

@mixin img-text {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    color: #ffffff;
    display: flex;
    align-items: center;
}

.type {
    background: #fff;

    p {
        margin-bottom: 0;
    }

    .type-left {
        position: relative;
        width: 50%;
        margin-right: 30px;

        img {
            max-width: 945px;
            width: 100%;
            height: 100%;
        }

        .left-text {
            @include img-text();
            justify-content: center;
            flex-direction: column;
            height: 100%;

            .left-title {
                padding-bottom: 20px;
                border-bottom: 2px solid #ffffff;
                margin-bottom: 20px;
            }

            .left-content {
                max-width: 443px;
                line-height: 32px;
            }

            .see-more {
                margin-top: 30px;

            }

            a {
                &:hover {
                    color: #ffffff;
                }
            }
        }

    }

    .type-right {
        width: 50%;

        a {
            color: #ffffff;

            &:hover {
                color: #ffffff;
            }
        }

        .right-top-img {
            max-width: 945px;
            width: 100%;
            height: 100%;
        }

        .right-top-box {
            width: 100%;
            height: 50%;
            padding-bottom: 15px;
            position: relative;

            &:last-child {
                padding-bottom: 0;
                padding-top: 15px;
            }

            .right-text {
                @include img-text();
                padding-left: 95px;
                height: 100%;
                align-content: center;
                flex-wrap: wrap;
                padding-top: 15px;

                .right-title {
                    width: 100%;
                    margin-bottom: 40px;

                    span {
                        padding-bottom: 20px;
                        border-bottom: 2px solid #ffffff;
                    }
                }

                p {
                    width: 100%;
                    margin-top: 20px;
                }

                .right-ul {
                    margin-top: 10px;
                }
            }
        }
    }
}

.middle-title {
    width: 100%;
    padding: 40px 0;
}

.second-type {
    margin-bottom: 20px;

    a {
        color: #ffffff;
    }


    .line {
        width: 300px;
        height: 3px;
        background: #FFFFFF;
        margin-bottom: 180px;
    }


    .right-top {
        height: 50%;
        padding-bottom: 15px;
        position: relative;

        &:last-child {
            padding-bottom: 0;
            padding-top: 15px;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .top-left {
            position: relative;
            width: 50%;
            padding-right: 15px;

        }

        .top-right {
            position: relative;
            width: 50%;
            padding-left: 15px;
        }

        .right-text {
            position: absolute;
            width: 100%;
            height: 100%;
            padding-right: 15px;
            top: 0;
            left: 0;
            text-align: center;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;

            &:last-child {
                padding-right: 0px;
                padding-left: 15px;
            }
        }
    }
}

.explain-box {
    position: relative;
    margin-bottom: 20px;

    img {
        width: 100%;
        max-height: 300px;
        opacity: 0;
    }

    .explain-text-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        p {
            margin-bottom: 0;
            white-space: nowrap;
        }
    }
}

.contact-box {
    background: url('../images/26.png') no-repeat;
    background-size: cover;

    img {
        width: 100%;
    }

    .contact-content-box {
        padding: 40px 18.75%;
        display: flex;
        justify-content: center;
        align-items: center;

        .form-box {
            padding: 50px 27%;
            border: 3px solid #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 18px;

            input {
                border: none;
                width: 550px;
                height: 50px;
                background: rgba($color: #ffffff, $alpha: 0.7);
                border-radius: 4px;
                padding-left: 9px;
                margin-bottom: 30px;
            }

            textarea {
                border: none;
                resize: none;
                width: 550px;
                height: 150px;
                background: rgba($color: #ffffff, $alpha: 0.7);
                border-radius: 4px;
                padding: 9px;
                margin-bottom: 40px;
            }

            .btn {
                font-size: 18px;
                color: #fff;
                padding: 15px 24px;
                border-radius: 4px;
                border: 2px solid #ffffff;
            }
        }
    }
}

.swiper-box {
    background: #111A21;
    padding: 80px 100px;
    color: #fff;
    position: relative;

    p {
        margin-bottom: 35px;
    }

    img {
        width: 296px;
    }

    .swiper-slide {
        padding: 0 5px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        --swiper-navigation-color: #888D90;
    }

}

.foot {
    background: #fff;
}

@media screen and (max-width: 750px) {
    .type-phone {
        padding: 0.5333rem 0;
        background: #fff;

        .type-item-top {
            margin-bottom: 0.4rem;

            .type-phone-block {
                width: 6.2667rem;
                height: 3.1467rem;
                background: linear-gradient(90deg, #7992A6, #384B59);
                opacity: 0.6;
            }

            .type-phone-top-img {
                position: relative;
                width: 8.4rem;
                height: auto;
                margin-top: -2.4667rem;
                margin-left: 0.8rem;

                img {
                    width: 100%;
                }
            }
        }

        .type-top-phone-text {
            padding: 0 0.8rem;

            .type-top-phone-title {
                display: inline-block;
                padding-bottom: 0.3333rem;
                margin-bottom: 0.2933rem;
                border-bottom: 1px solid #EEEEEE;
            }

            a {
                color: #333;
                display: inline-block;
                margin-top: 0.3333rem;
            }
        }

        .type-middle-phone {
            padding: 0.5333rem 0.4rem;

            img {
                width: 100%;
                max-width: 4.4rem;
                height: auto;
            }

            .type-middle-left-phone-text {
                margin-top: 0.2667rem;
                width: 4.4rem;
                box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
                padding: 0.5333rem 0.24rem;

                p {
                    &:first-child {
                        padding-bottom: 0.2667rem;
                        border-bottom: 2px solid #EEEEEE;
                        margin-bottom: 0.24rem;
                    }
                }

                a {
                    display: inline-block;
                    color: #333;
                    margin-top: 0.3333rem;
                }
            }

            .type-middle-right-phone {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-end;
                align-content: space-between;

                .type-middle-right-phone-text {
                    @extend .type-middle-left-phone-text;
                    margin-top: 0;
                    padding: 0.24rem;

                }
            }
        }

        .type-bottom-phone {
            padding: 0 0.4rem;

            img {
                position: relative;
                z-index: 99;
                width: 100%;
                max-width: 1.8933rem;
                height: auto;
                display: block;
            }

            .type-bottom-img-box-phone {
                position: relative;
            }

            .type-bottom-phone-left {
                .type-bottom-img-box-phone {
                    &:first-child {
                        margin: 0.6667rem 0 0.7733rem 0.88rem;

                        &::after {
                            content: '';
                            display: block;
                            position: absolute;
                            width: 1px;
                            height: 2.2667rem;
                            background: map-get($map: $colors, $key: '799');
                            top: 70%;
                            left: 120%;
                            transform: rotate(135deg);
                        }
                    }
                }
            }

            .type-bottom-phone-middle {
                margin: 0 0.84rem;

                .type-bottom-img-box-phone {
                    &:first-child {
                        margin-bottom: 1.4133rem;

                        &::after {
                            content: '';
                            display: block;
                            position: absolute;
                            width: 1px;
                            height: 2.2667rem;
                            background: map-get($map: $colors, $key: '799');
                            top: 100%;
                            left: 50%;
                        }
                    }

                    &:last-child {
                        &::before {
                            content: '';
                            display: block;
                            position: absolute;
                            width: 7.4267rem;
                            height: 1px;
                            background: map-get($map: $colors, $key: '799');
                            top: 50%;
                            left: -120%;
                        }
                    }
                }
            }

            .type-bottom-phone-right {
                .type-bottom-img-box-phone {
                    &:first-child {
                        margin: 0.6667rem 0.88rem 0.7733rem 0;

                        &::before {
                            content: '';
                            display: block;
                            position: absolute;
                            width: 1px;
                            height: 2rem;
                            background: map-get($map: $colors, $key: '799');
                            top: 70%;
                            right: 120%;
                            transform: rotate(45deg);
                        }
                    }

                    &:last-child {
                        img {
                            margin-left: auto;
                        }
                    }
                }
            }
        }
    }

    .explain-text-box {
        p {
            &:first-child {
                font-size: 0.3733rem;
            }

            &:last-child {
                font-size: 0.24rem;
            }
        }
    }

    .contact-content-box {
        padding: 0.5333rem 0.8rem !important;

        .form-box {
            width: 100%;
            font-size: 0.3733rem !important;
            padding: 0.6667rem 0.5333rem !important;

            input {
                width: 100% !important;
                height: 0.8rem !important;
            }

            textarea {
                width: 100% !important;
            }

            .btn {
                font-size: 0.4rem;
                padding: 0.2133rem 0.2667rem !important;
                font-size: 0.4rem !important;
            }
        }
    }

    .swiper-box {
        padding: 0.3733rem 0.44rem;

        img {
            width: 2.7333rem !important;
            height: auto;
        }

        .swiper-button-prev,
        .swiper-button-next {
            top: 65%;
            &::after {
                font-size: 0.6rem;
            }
        }
        .swiper-button-prev {
            left: 0;
        }
        .swiper-button-next {
            right: 0;
        }
    }

    .contact-box {
        background: url('../images/index_phone_33.png') no-repeat;
        background-size: cover;
    }

}